<template>
    <div class="leftbottom">
        <div class="header">差评责任分析</div>
        <div class="flex">
            <div class="pie-wrap">
                <div class="tab-wrap flex">
                    <div class="tab-item" :class="{ act: !act }">差评</div>
                </div>
                <div class="chart-wrap">
                    <div class="bg"></div>
                    <div class="chart" ref="chart"></div>
                </div>
            </div>
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <td rowspan="2">责任位</td>
                            <td colspan="2">日</td>
                            <td colspan="4">月累计</td>
                        </tr>
                        <tr>
                            <td>差评量</td>
                            <td>占比</td>
                            <td>差评量</td>
                            <td>差评率</td>
                            <td>占比</td>
                            <td>同比</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="(item, index) in info.tableList"
                            :key="`item-${index}`"
                        >
                            <td v-for="(i, ind) in item" :key="`i-${ind}`">
                                {{ i }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="cloud">
                <my-title title="好评" left="860px" top="60px"></my-title>
                <div class="chart" ref="cloud-1"></div>
                <my-title
                    title="差评"
                    left="860px"
                    top="240px"
                    color="red"
                ></my-title>
                <div class="chart" ref="cloud-2"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        info: {},
    },
    data() {
        return {
            act: false,
        };
    },
    watch: {
        info: {
            handler(newVal) {
                this.pieChartInit(newVal.pieData);
                this.cloudChartInit1(newVal.goodData);
                this.cloudChartInit2(newVal.badData);
            },
            deep: true,
        },
    },
    methods: {
        pieChartInit(datas) {
            let _chart = this.$echarts.init(this.$refs["chart"]);
            let _option = {
                color: [
                    "#ae5439",
                    "#b88f38",
                    "#c7c752",
                    "#3eb077",
                    "#4c4bfb",
                    "#0bafe6",
                ],
                tooltip: {
                    trigger: "item",
                    formatter: "{d}%",
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["20%", "60%"],
                        center: ["50%", "55%"],
                        roseType: "radius",
                        label: {
                            formatter: "{b}{d}%",
                            fontSize: 14,
                            color: "#8fadcc",
                        },
                        labelLine: {
                            length: 10,
                            length2: 20,
                        },
                        data: datas,
                    },
                ],
            };
            _chart.setOption(_option);
        },
        cloudChartInit1(list) {
            let _chart = this.$echarts.init(this.$refs["cloud-1"]);
            let _option = {
                series: [
                    {
                        type: "wordCloud",

                        shape: "pentagon",

                        left: "center",
                        top: "center",
                        width: "100%",
                        height: "100%",
                        right: null,
                        bottom: null,
                        sizeRange: [14, 50],
                        rotationRange: [0, 0],
                        rotationStep: 0,
                        gridSize: 25,
                        drawOutOfBound: false,
                        layoutAnimation: true,
                        textStyle: {
                            fontWeight: 500,
                            color: "#00d3fd",
                        },
                        emphasis: {
                            focus: "none",
                        },
                        data: list,
                    },
                ],
            };
            _chart.setOption(_option);
        },
        cloudChartInit2(list) {
            let _chart = this.$echarts.init(this.$refs["cloud-2"]);
            let _option = {
                series: [
                    {
                        type: "wordCloud",
                        shape: "pentagon",
                        left: "center",
                        top: "center",
                        width: "100%",
                        height: "100%",
                        right: null,
                        bottom: null,
                        sizeRange: [14, 50],
                        rotationRange: [0, 0],
                        rotationStep: 0,
                        gridSize: 25,
                        drawOutOfBound: false,
                        layoutAnimation: true,
                        textStyle: {
                            fontWeight: 500,
                            color: "#cf4052",
                        },
                        emphasis: {
                            focus: "none",
                        },
                        data: list,
                    },
                ],
            };
            _chart.setOption(_option);
        },
    },
    created() {},
    mounted() {},
};
</script>
<style lang='less' scoped>
.leftbottom {
    position: absolute;
    left: 58px;
    top: 543px;
    width: 1300px;
    height: 414px;
    .header {
        width: 1249px;
        height: 36px;
        background: url(../../../assets/img/dialog/head-bg.png);
        line-height: 36px;
        padding-left: 34px;
        font-size: 18px;
    }
    .pie-wrap {
        width: 390px;
        height: 295px;
        .tab-wrap {
            width: 101px;
            height: 31px;
            border-radius: 5px;
            // background: #010c50;
            margin-left: 25px;
            padding: 2px;
            .tab-item {
                width: 47px;
                height: 26px;
                border-radius: 3px;
                font-size: 14px;
                text-align: center;
                line-height: 26px;
                cursor: pointer;
                &.act {
                    background: #33aaff;
                }
            }
        }
        .chart-wrap {
            position: relative;
            width: 416px;
            height: 260px;
            .bg {
                position: absolute;
                width: 180px;
                height: 180px;
                left: 50%;
                transform: translate(-50%);
                border-radius: 50%;
                border: 1px dashed #114371;
                top: 55px;
            }
            .chart {
                position: absolute;
                width: 416px;
                height: 260px;
                left: 0;
                top: 0;
            }
        }
    }
    .table {
        width: 430px;
        height: 297px;
        margin-left: 30px;
        margin-top: 30px;
        table {
            font-size: 12px;
            border-color: red;
            thead {
                background: rgba(8, 30, 121, 0.4);
                text-align: center;
                color: #8fadcc;
                td {
                    padding: 10px 14px;
                }
            }
            tbody {
                text-align: center;
                background: rgba(3, 10, 26, 0.4);
                td {
                    padding: 10px 0;
                }
            }
        }
    }
    .cloud {
        margin-top: 60px;
        width: 420px;
        height: 295px;
        margin-left: 30px;
        .chart {
            width: 360px;
            height: 120px;
            margin-bottom: 50px;
        }
    }
}
</style>
